<template>
  <div>
    <!-- 动画 -->
    <transition name="menu">
      <div v-show="show" class="menu-container">
        <div class="logo-container">
          <div class="logo" :title="msg">
            <img :src="logo">
          </div>
          <div class="logo-title">闲　言</div>
        </div>

        <div class="right-container">
          <el-menu
            :default-active="activeIndex"
            class="el-menu-demo"
            mode="horizontal"
            @select="selectMenu"
          >
            <el-menu-item index="/main">首页</el-menu-item>
            <el-menu-item index="/type">分类</el-menu-item>
            <el-menu-item index="/timeLine">时间轴</el-menu-item>
            <el-menu-item index="/about">关于闲言</el-menu-item>
          </el-menu>
          <div class="search-form">
            <el-input
              v-model="searchText"
              size="mini"
              placeholder="搜一搜"
              @keyup.enter.native="setSearchText"
            />
          </div>
          <div class="header">
            <el-dropdown>
              <img :src="header">
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item
                  @click.native="selectMenu('/userCenter')"
                >个人中心</el-dropdown-item>
                <el-dropdown-item @click.native="logout">退出登录</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </div>
        </div>
      </div>
    </transition>
  </div>
</template>

<script>
export default {
  data() {
    return {
      // 当前选中的菜单下标
      activeIndex: '/main',
      // 搜索文本
      searchText: '',
      // 头像
      header: require('@/assets/header.gif'),
      logo: require('@/assets/logo.png'),
      // 显示导航栏
      show: true,
      msg: '🐱喵了个喵喵'
    }
  },
  created() {
    this.mouseScroll()
  },
  methods: {
    // 退出登录
    logout() {
      this.$store.dispatch('user/logout').then(res => {
        this.$message.success('退出成功')
        this.$router.push('/')
      })
    },
    // 向vuex中设置搜索文本
    setSearchText() {
      this.$store.commit('user/SET_SEARCH_TEXT', this.searchText)
    },
    // 菜单选中触发
    selectMenu(index) {
      this.$router.push(index)
    },
    // / 给页面监听鼠标滚轮事件
    mouseScroll() {
      if (document.addEventListener) {
        document.addEventListener('DOMMouseScroll', this.watchScroll, false)
      }
      window.onmousewheel = document.onmousewheel = this.watchScroll
    },
    // 实际监听中处理的逻辑
    watchScroll(e) {
      e = e || window.event
      const num = e.wheelDelta
      if (num) {
        if (num > 0 && this.show === false) {
          // 向上滚动
          this.show = true
        } else if (num < 0 && this.show === true) {
          this.show = false
        }
      } else if (e.detail) {
        if (e.detail < 0 && this.show === false) {
          // 向上滚动
          this.show = true
        } else if (e.detail > 0 && this.show === true) {
          this.show = false
        }
      }
    }
  }
}
</script>

<style scoped>
@import url("./nav-menu.css");
</style>
